import Table from 'ant-design-vue/es/table'
import Vue from 'vue'
import Empty from '@/components/Empty/Empty'

export default {
  name: 'GirdTable',
  model: {
    prop: 'load',
    event: 'loadChange'
  },
  props: {
    // 是否创建时执行查询，默认查询
    silence: {
      type: Boolean,
      default: false
    },
    // 执行查询的方法
    url: {
      type: Function,
      default: undefined
    },
    // 表格列的配置描述
    columns: {
      type: Array
    },
    // 查询参数转换钩子函数 ！！！必须返回！！！
    paramsConv: {
      type: Function,
      default: () => ({})
    },
    // 查询结果转换钩子函数 ！！！必须返回！！！
    dataConv: {
      type: Function,
      default: (data) => data
    },
    // 分页参数转换钩子函数 ！！！必须返回！！！
    pageConv: {
      type: Function,
      default: (current, pageSize) => ({
        pageNum: current,
        pageSize
      })
    },
    // 滚动条
    scroll: {
      type: Object,
      default: undefined
    },
    // 表格加载状态
    load: {
      type: Boolean,
      default: false
    },
    // 表格行的类名
    rowClassName: {
      type: Function,
      default: () => ''
    },
    // 表格行 key 的取值
    rowKey: {
      type: String,
      default: 'id'
    }
  },
  data () {
    return {
      locale: {
        emptyText: < Empty / >
      },
      data: [],
      // 分页信息
      page: {
        // 第几页
        current: 1,
        // 条数统计
        total: 0,
        // 每页几条
        pageSize: 10,
        // 指定每页可以显示多少条
        pageSizeOptions: ['10', '20', '30', '40'],
        // 是否可以改变 pageSize
        showSizeChanger: true,
        // 用于显示数据总量和当前数据顺序
        showTotal: this.pageShowTotal
      }
    }
  },
  methods: {
    reset () {
      this.page = {
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showSizeChanger: true,
        showTotal: this.pageShowTotal
      }
      this.data = []
    },
    // 点击查询按钮，重置分页信息查询
    searchQuery () {
      this.reset()
      this.getGridData()
    },
    // 点击分页器进行查询
    pageQuery (pagination) {
      this.page = pagination
      this.getGridData()
    },
    // 分页器显示条数
    pageShowTotal (total) {
      return `共${total}条`
    },
    // 查询
    async getGridData () {
      if (!this.url) {
        this.$message.newFun('未设置url', 'error', 3)
        return
      }
      this.$emit('loadChange', true)

      const {
        current,
        pageSize
      } = this.page

      const queryPage = this.pageConv(current, pageSize)
      const queryParams = this.paramsConv()
      const params = Object.assign({}, queryParams, queryPage)
      try {
        const res = await this.url(params)
        const {
          data,
          isSuccess,
          msg
        } = res
        if (isSuccess) {
          try {
            // 返回的数据错误，重置分页和数据
            let {
              records,
              current,
              total
            } = data
            if (records === null) {
              records = []
            }
            this.data = this.dataConv(records)
            Object.assign(this.page, {
              current,
              total
            })
            this.$emit('total', this.page.total)
          } catch {
            this.reset()
          }
        } else {
          this.$message.newFun(msg, 'error', 3)
        }
      } catch (err) {
        Vue.prototype.$message.error('查询出错', 3)
        this.$emit('total', 0)
      } finally {
        this.$emit('loadChange', false)
      }
    }
  },
  mounted () {
    if (!this.silence) {
      this.getGridData()
    }
  },
  render (h) {
    return h(
      Table, {
        props: {
          columns: this.columns,
          dataSource: this.data,
          pagination: this.page,
          loading: this.load,
          scroll: this.scroll,
          rowKey: this.rowKey,
          size: 'middle',
          locale: this.locale,

          rowClassName: this.rowClassName

        },
        class: ['nmv-table-wrapper'],
        on: {
          change: this.pageQuery
        }
      }
    )
  }
}
